<template>
    <div>
      <NavBar />
      <PostList :posts="posts" />
    </div>
  </template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { useStore } from 'vuex'
import axios from '../plugins/axios'
import NavBar from '../components/NavBar.vue'
import PostList from '../components/PostList.vue'

const posts = ref([])
const store = useStore() // 获取 Vuex Store 实例

// 定义获取数据的函数
const fetchPosts = async () => {
  try {
    const user = store.getters.getUser
    if (user && user.id) {
      // 拼接用户 ID 到请求 URL 中
      const response = await axios.get(`/posts/recommend/${user.id}`)
      posts.value = response.data
    } else {
      console.error('User ID is not available')
    }
  } catch (error) {
    console.error('Error fetching posts:', error)
  }
}

// 在组件挂载时调用 fetchPosts 函数
onMounted(() => {
  fetchPosts()
})
</script>